/**
* 物料需求申请-查看
*/
<template>
    <div class="layout-parent w100 p10">
        <el-tabs type="border-card">
            <el-tab-pane>
                <template #label><vp-label zh="基本信息" en="Basic Info" /></template>
                <ProjectTechBulletin ref="commRef" :loading="loading" :type="type">
                </ProjectTechBulletin>
            </el-tab-pane>
            <el-tab-pane v-if="formData.processInsId">
                <template #label><vp-label zh="流程记录" en="Process Record"/></template>
                <ProcessHistory :processInsId="formData.processInsId" />
            </el-tab-pane>
            <el-tab-pane v-if="formData.processInsId">
                <template #label><vp-label zh="流程图" en="Process Chart"/></template>
                <ProcessView :processInsId="formData.processInsId"/>
            </el-tab-pane>
            <el-tab-pane>
                <template #label><vp-label zh="操作记录" en="Operation Record"/></template>
                <VpOperationRecordCard :id="props.id" ref="rcListRef"></VpOperationRecordCard>
            </el-tab-pane>
        </el-tabs>
        <StatusBar :id="formData.id" :status="formData.zt" :isValid="formData.yxbs"/>
    </div>
</template>
<script setup lang="ts" name="viewProjectTechBulletin">
import { ref,onMounted,nextTick } from 'vue';
import request from '/@/utils/request';
import ProjectTechBulletin from './ProjectTechBulletin.vue';
import StatusBar from '/@/components/vp/status/StatusBar.vue';
import ProcessView from '/@/components/vp/workflow/ProcessView.vue';
import VpOperationRecordCard from '/@/components/vp/operationRecord/VpOperationRecordCard.vue';
import ProcessHistory from '/@/components/vp/workflow/ProcessHistory.vue';

const props= defineProps<{ 
    id: string,
}>();

const loading = ref(false);
const type = ref('view');

const commRef = ref();

const formData = ref({
    id: '',
    zt: 10,
    yxbs: 1,
    processInsId: '',
});


onMounted(() => {
    loadForm();
});

// 加载数据
const loadForm = ()=>{
    nextTick(() => {
        loading.value = true;
        request.get(`/material/demand/${props.id}`).then((res)=>{
            commRef.value.setData({
                ...res.data,
            });
            formData.value = res.data;
            loading.value = false;
        })
    });
}

</script>
